<template>
  <div class="markDown">
    <v-md-editor
        v-model="text"
        height="800px"
        :include-level="[1,2,3, 4]"
        left-toolbar="undo redo clear | h bold italic strikethrough quote | ul ol table hr | link image code | save | tip | emoji"
        :disabled-menus="[]"
        @upload-image="handleUploadImage"
    ></v-md-editor>
  </div>

</template>

<script setup>
import VueMarkdownEditor, { xss } from '@kangc/v-md-editor';
import {upload} from "@/api";
const text = ref("");
const props = defineProps(['modelValue']);
const emit = defineEmits(['update:modelValue'])
watch(()=>props.modelValue,val=>{
  text.value = val;
});

watch(()=>text.value,val=>{
  // text.value = val;
  const html = xss.process(VueMarkdownEditor.vMdParser.themeConfig.markdownParser.render(val));
  console.log('html',html)
  emit('update:modelValue',val);
});

const handleUploadImage = (event, insertImage, files)=> {
  // 拿到 files 之后上传到文件服务器，然后向编辑框中插入对应的内容
  console.log(files);
  console.log(files[0]);

  // 此处只做示例
  const data = new FormData();
  data.append('file',files[0] );
  // console.log('data',data.get('file'))
  upload(data).then(res=>{
    insertImage({
      url:import.meta.env.VITE_APP_BASE_URL + res.data.url,
      desc: res.data.name,
      // width: 'auto',
      // height: 'auto',
    });
  })
  // 此处只做示例

}
</script>

<style scoped lang="scss">
.markDown{
  width: 100%;
}
</style>